<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}基础模板{% endblock %}</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link rel="stylesheet" href="{% static 'css/iconfont.css' %}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{% static 'js/base.js' %}"></script>
    <script src="{% static 'js/iconfont.js' %}"></script>
    {% block css %}
    {% endblock %}
    {% block js %}
    {% endblock %}
</head>
<body>
    <header role="banner">
        <div class="header-container">
            <div class="header-left">
                <a href="/">
                    <img src="{% static 'images/logo.png' %}" alt="网站logo" width="120" height="50">
                </a>
            </div>
            <div class="header-center">
                <nav>
                    <a href="/">首页</a>
                    <a href="/page1">产品介绍</a>
                    <a href="/page2">关于我们</a>
                </nav>
            </div>
            <div class="header-right">
                {% if user.is_authenticated %}
                    <div class="user-menu">
                        <img src="{% static 'images/user.png' %}" alt="头像" class="user-avatar">
                        <div class="dropdown-menu" id="dropdown-menu">
                            <a href="{% url 'userinfo' %}">个人中心</a>
                            <a href="{% url 'logout' %}">退出</a>
                        </div>
                    </div>
                {% else %}
                    <a href="{% url 'login' %}">登录</a>
                {% endif %}
            </div>
        </div>
    </header>
    <main>
        <div id="sidebar-container">
            <nav class="sidebar">
                <ul>
                    <li>
                        <a href="/">
                            <i class="iconfont icon-entypohome sidebar-icon"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-entypodatabase sidebar-icon"></i>
                            <span>数据产品</span>
                        </a>
                        <ul class="submenu" id="submenu1">
                            <li>
                                <a href="/page1">
                                    <i class="iconfont icon-entypoeye sidebar-icon"></i>
                                    <span>运营情况</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page2">
                                    <i class="iconfont icon-entypolist sidebar-icon"></i>
                                    <span>异常明细</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page3">
                                    <i class="iconfont icon-entypoflowcascade sidebar-icon"></i>
                                    <span>系统人员</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-entypochartpie sidebar-icon"></i>
                            <span>数据分析</span>
                        </a>
                        <ul class="submenu" id="submenu2">
                            <li>
                                <a href="/page1">
                                    <i class="iconfont icon-entypolightup sidebar-icon"></i>
                                    <span>运营情况</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page2">
                                    <i class="iconfont icon-entypolistadd sidebar-icon"></i>
                                    <span>异常明细</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page3">
                                    <i class="iconfont icon-entyporenren sidebar-icon"></i>
                                    <span>系统人员</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-entypocloud sidebar-icon"></i>
                            <span>云平台</span>
                        </a>
                        <ul class="submenu" id="submenu3">
                            <li>
                                <a href="/page1">
                                    <i class="iconfont icon-entyposhareable sidebar-icon"></i>
                                    <span>运营情况</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page2">
                                    <i class="iconfont icon-entypogauge sidebar-icon"></i>
                                    <span>异常明细</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page3">
                                    <i class="iconfont icon-entyponetwork sidebar-icon"></i>
                                    <span>系统人员</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont icon-entypoflowtree sidebar-icon"></i>
                            <span>人工智能</span>
                        </a>
                        <ul class="submenu" id="submenu4">
                            <li>
                                <a href="/page1">
                                    <i class="iconfont icon-entypochartarea sidebar-icon"></i>
                                    <span>数据服务</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page2">
                                    <i class="iconfont icon-entypoflowparallel sidebar-icon"></i>
                                    <span>AI对话</span>
                                </a>
                            </li>
                            <li>
                                <a href="/page3">
                                    <i class="iconfont icon-entypohelp sidebar-icon"></i>
                                    <span>人工服务</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="content">
            {% block content %}
            {% endblock %}
        </div>
    </main>
    <footer>
        <!-- 底部版权信息 -->
    </footer>
</body>
</html>